<template>
  <div class="userList-container">
        <el-form ref="searchForm" :model="formData" inline label-width="100px" style="display:flex ; justify-content: flex-end; margin-top: 10px;">
            <el-form-item  prop="userId">
                <el-input v-model="formData.userId"  placeholder="请输入用户名ID"></el-input>
            </el-form-item>
            <el-form-item  prop="valueId">
                <el-input v-model="formData.valueId" placeholder="请输入商品ID"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="getData"  type="primary"  icon="el-icon-search">查找</el-button>
            </el-form-item>
        </el-form>

        <el-table :data="tableData" border="" v-loading="tableLoading" >
            <el-table-column align="center" label="收藏ID" prop="id"></el-table-column>
            <el-table-column align="center" label="用户ID" prop="userId" ></el-table-column>
            <el-table-column align="center" label="商品ID" prop="valueId"></el-table-column>
            <el-table-column align="center" label="添加时间" prop="addTime"></el-table-column>
        </el-table>

        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageInfo.page"
            :page-sizes="[1, 2, 3, 4]"
            :page-size="pageInfo.limit"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageInfo.total">
        </el-pagination>

    </div>
</template>
  
<script>
import axios from 'axios'
export default {
  name: 'userCollect',
  componentTitle: '用户收藏',
  data () {
        return {
            tableLoading:false,  
            dialogVisible: false,
            tableData: [],
            formData: {
                userId: "",
                valueId: "",
            },
            pageInfo:{
                // 当前在第几页
            page: 1,
            limit: 1,
            total: 0,
            },        
        }
    },
 
    mounted () {
        this.getData()
    },
    filters:{
        tableFilter(value,options){
            let index=options.findIndex(item=>{
                return Number(item.value)===Number(value)
            })
            if(index<0){
                return '----'
            }else{
                return options[index].label
            }
        }
    },
    methods: {
        getData () {
            this.tableLoading=true
             axios({
          url:'http://192.168.200.251:8888/admin/collect/list',
          method:'get',
          params:{
              page:this.pageInfo.page,
              limit:this.pageInfo.limit,
              ...this.formData
          },
          //请求头信息
          headers:{
            'Content-Type':'application/json; charset=utf-8',
            'Shopping-Admin-Token':sessionStorage.getItem('Shopping-Admin-Token'),
          },
        }).then(res=>{
          this.tableLoading=false
          console.log(res);
          this.tableData=res.data.data.list
          this.pageInfo.total=res.data.data.total

        })
        },
          // 每页多少条切换
    handleSizeChange (value) {
      this.pageInfo.limit = value
      this.getData()
    },
    // 当前页码的切换
    handleCurrentChange (value) {
      this.pageInfo.page = value
      this.getData()
    }

    }
}
</script>

<style lang="scss" scope>

</style>








